<template>
  <div class="login-area">
    <div class="login-view">
      <div class="login-image">

      </div>
      <div class="login-from p-4">
        <div class="form-title font-medium pb-4 text-2xl">🎯 Sign in</div>
        <lay-form :model="model">
          <div class="relative" @keyup="showClearIcon('username')" @mouseover="showClearIcon('username')"
            @mouseout="hideClearIcon('username')">
            <lay-form-item prop="username">
              <lay-input prefix-icon="layui-icon-username" v-model="model.username"></lay-input>
              <div class="absolute top-3 right-2">
                <span @click="clearInput('username')" v-show="isClearIconVisible.username"><lay-icon
                    type="layui-icon-clear" color="#666"></lay-icon></span>
              </div>
            </lay-form-item>
          </div>
          <div class="relative" @keyup="showClearIcon('password')" @mouseover="showClearIcon('password')"
            @mouseout="hideClearIcon('password')">
            <lay-form-item prop="password">
              <lay-input prefix-icon="layui-icon-password" v-model="model.password" :type="passwordType.type"></lay-input>
            </lay-form-item>
            <div class="absolute top-3 right-2">
              <span class="mx-2" @click="showPassword"><lay-icon :type="passwordType.icon" color="#666"></lay-icon></span>
              <span @click="clearInput('password')" v-show="isClearIconVisible.password"><lay-icon type="layui-icon-clear"
                  color="#666"></lay-icon></span>
            </div>
          </div>
          <div class="flex">
            <div class="relative" @keyup="showClearIcon('verifyCode')" @mouseover="showClearIcon('verifyCode')"
              @mouseout="hideClearIcon('verifyCode')">
              <lay-form-item prop="verifyCode" mode="inline" @keyup="showClearIcon('verifyCode')"
                @mouseover="showClearIcon('verifyCode')" @mouseout="hideClearIcon('verifyCode')">
                <lay-input prefix-icon="layui-icon-vercode" v-model="model.verifyCode" type="text"></lay-input>
              </lay-form-item>
              <div class="absolute top-3 right-4">
                <span @click="clearInput('verifyCode')" v-show="isClearIconVisible.verifyCode"><lay-icon
                    type="layui-icon-clear" color="#666"></lay-icon></span>
              </div>
            </div>

            <div class="verify w-1/3 ">
              <div class="border rounded overflow-hidden">
                <img  :src="model.verifyImg" alt="" srcset="">
              </div>
            </div>
          </div>
          <div class="pb-5">
            <lay-checkbox name="savePassword" skin="primary" v-model="model.savePassword" label="记住密码"></lay-checkbox>
          </div>

          <div>
            <lay-form-item style="text-align: center;">
              <lay-button type="primary" fluid @click="submit">提交</lay-button>
            </lay-form-item>
          </div>
        </lay-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted} from 'vue'
import { useRouter } from 'vue-router';  
import { useStore } from 'vuex';
import { layer } from '@layui/layer-vue'

const model = reactive({ 
  username: "", 
  password: '', 
  verifyCode: '', 
  savePassword: false,
  verifyImg: "" ,
  verifyId:''
})
const isClearIconVisible = reactive({
  username: model.username != "",
  password: model.password != "",
  verifyCode: model.verifyCode != "",
});

const passwordType = reactive({
  icon: "layui-icon-show",
  type: "password",
})
const router = useRouter();  
const store = useStore(); // 获取 Vuex store 实例  
const submit = () => {

  //判断username,password,verifyCode是否为填写
  if(model.username==""||model.password==""||model.verifyCode==""){
    layer.msg('请填写完整', { time: 2000 });
    return;
  }
  //请求后台地址登录，首先验证码是否正确，然后验证用户名密码是否匹配数据库中的数据。
  if(model.username=="admin"&&model.password=="123456"&&model.verifyCode=="123"){
    layer.msg('登录成功', { time: 2000 });
    localStorage.setItem('loginState','tokens')
    setTimeout(() =>{
      store.commit('loginSuccess');
      router.push({ name: 'home' }); 

    },2000)
  }
  //返回异常，如果用户密码正确则重定向到系统首页中

};


//生成一个切换验证码的方法



const showClearIcon = (field) => {
  if (model[field] != "") {
    isClearIconVisible[field] = true;
  }

};

const showPassword = () => {
  if (passwordType.type === "password") {
    passwordType.icon = "layui-icon-hide"
    passwordType.type = "text"
  } else {
    passwordType.icon = "layui-icon-show"
    passwordType.type = "password"
  }
}
const hideClearIcon = (field) => {
  isClearIconVisible[field] = false;
};
const clearInput = (key) => {
  model[key] = "";
  hideClearIcon(key);
};

</script>
 
<style scoped>
.login-area {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-view {
  min-width: 800px;
  min-height: 400px;
  display: flex;
  border-radius: 5px;
  box-shadow: 6px 6px 12px 4px #0000001a;
  overflow: hidden;

}

.login-image {
  flex-grow: 1;
  width: calc(100% - 400px);
  background-color: #009688;
  padding: 5% 2%;
}

.login-from {
  width: 400px;
}</style>
  